<!DOCTYPE html>
<html>

    <head>
		<meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    	<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telphone=no, email=no" />
		<title></title>
		<link rel="stylesheet" href="css/jquery.pagepiling.min.css" />
		<link rel="stylesheet" href="css/swiper.min.css" />
		<link rel="stylesheet" href="css/darktooltip.min.css">
		<link rel="stylesheet" href="css/style.min.css" />
	</head>

	<body>
		<!--[if lte IE 8]>
		<div class="tips-warning">
			<span>!</span>
    		<h3>您使用的浏览器版本未免也太低了吧</h3>
    		<p>为了你能看到更好的页面展示</p>
    		<p>建议你还是使用 <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=ie%E6%B5%8F%E8%A7%88%E5%99%A8&oq=ie11&rsv_pq=d265e48d0000347b&rsv_t=0d7dbSXA4aIlRux5g8OD7puGZC80hmoxJybyZVtlAg8yC1Wsqz48AT1BN5s&rqlang=cn&rsv_enter=0&inputT=5689&rsv_sug3=37&rsv_sug1=27&rsv_sug7=100&rsv_sug2=0&rsv_sug4=6303" target="_blank">IE最新浏览器</a> 或者使用 <a class="blue" href="https://www.baidu.com/s?ie=UTF-8&wd=%E8%B0%B7%E6%AD%8C%E6%B5%8F%E8%A7%88%E5%99%A8" target="_blank">谷歌浏览器Chrome</a></p>
		</div>
		<![endif]-->
		<div id="pagepiling">

			<div class="section">
				<div class="my-modal">

				</div>
				<div class="my-modal">
					<div class="dialog-content-tip">
						<h3>基本信息</h3>
						<div class="tip-dialog">
							<p>姓名：徐琦琦</p>
							<p>年龄：24岁</p>
							<p>学历：专科</p>
							<p>工作经验：一年</p>
							<p>QQ：247777975</p>
							<p>E-mail：xuqiqi2533@163.com</p>
							<p>Tel：17355457790</p>
						</div>
					</div>
					<button type="button" class="tip-close">×</button>
				</div>
				<div class="psa">
					<div class="avatar"><img src="img/avatar.png" /></div>
					<div class="line"></div>
					<h3 class="my-name">徐琦琦<span>WEB前端开发工程师</span></h3>
					<p>将前端进行到底，用代码编写人生！</p>
				</div>
				<a class="myBtn" href="javascript:void(0);">基本资料</a>
				<canvas></canvas>
			</div>
			<div class="section">
				<h1>专业技能</h1>
				<div class="skill">
					<div class="skill-item">
						<div class="ih-item circle effect1">
							<a href="#">
								<div class="spinner"></div>
								<div class="img"><img src="img/html.jpg"></div>
								<div class="info">
									<div class="info-back">
										<h3>HTML/HTML5</h3>
										<p>熟悉HTML标签，能够利用HTML完成常见网页布局，并且熟悉HTML5中的新特性及其用法</p>
									</div>
								</div>
							</a>
						</div>
					</div>
					<div class="skill-item">
						<div class="ih-item circle effect1">
							<a href="#">
								<div class="spinner"></div>
								<div class="img"><img src="img/css.jpg"></div>
								<div class="info">
									<div class="info-back">
										<h3>CSS/CSS3</h3>
										<p>熟悉CSS的使用场景，CSS3的新特性，能够利用CSS3完成常见效果和布局</p>
									</div>
								</div>
							</a>
						</div>
					</div>
					<div class="skill-item">
						<div class="ih-item circle effect1">
							<a href="#">
								<div class="spinner"></div>
								<div class="img"><img src="img/js.jpg"></div>
								<div class="info">
									<div class="info-back">
										<h3>JAVASCRIPT</h3>
										<p>了解原生的javascript，能使用原生javascript编写常见的网页交互效果</p>
									</div>
								</div>
							</a>
						</div>
					</div>
					<div class="skill-item">
						<div class="ih-item circle effect1">
							<a href="#">
								<div class="spinner"></div>
								<div class="img"><img src="img/jq.jpg"></div>
								<div class="info">
									<div class="info-back">
										<h3>JQUERY</h3>
										<p>熟悉jQuery的使用和其原理，能够快速使用jQuery来简化web开发流程</p>
									</div>
								</div>
							</a>
						</div>
					</div>
					<div class="skill-item">
						<div class="ih-item circle effect1">
							<a href="#">
								<div class="spinner"></div>
								<div class="img"><img src="img/boot.png"></div>
								<div class="info">
									<div class="info-back">
										<h3>Bootstrap</h3>
										<p>熟悉Bootstrap框架，能够运用bootstrap快速开发pc端和移动端的页面。</p>
									</div>
								</div>
							</a>
						</div>
					</div>
					<div class="skill-item">
						<div class="ih-item circle effect1">
							<a href="#">
								<div class="spinner"></div>
								<div class="img"><img src="img/less.png"></div>
								<div class="info">
									<div class="info-back">
										<h3>LESS</h3>
										<p>了解less，能简单的使用less写出css</p>
									</div>
								</div>
							</a>
						</div>
					</div>
					<div class="skill-item">
						<div class="ih-item circle effect1">
							<a href="#">
								<div class="spinner"></div>
								<div class="img"><img src="img/sass.png"></div>
								<div class="info">
									<div class="info-back">
										<h3>sass</h3>
										<p>了解sass，能简单的使用sass写出css</p>
									</div>
								</div>
							</a>
						</div>
					</div>
					<div class="skill-item">
						<div class="ih-item circle effect1">
							<a href="#">
								<div class="spinner"></div>
								<div class="img"><img src="img/ps.png"></div>
								<div class="info">
									<div class="info-back">
										<h3>PS</h3>
										<p>能进行简单的图片处理、切图和抠图；能根据图片特征存成最优的格式。</p>
									</div>
								</div>
							</a>
						</div>
					</div>
					<div class="skill-item">
						<div class="ih-item circle effect1">
							<a href="#">
								<div class="spinner"></div>
								<div class="img"><img src="img/ide.png"></div>
								<div class="info">
									<div class="info-back">
										<h3>开发工具</h3>
										<p>常用HBuilder开发，Sublime写小demo,其他用过DW、Atom、WebStorm、NotePad++</p>
									</div>
								</div>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="section">
				<h1>项目经验</h1>
				<div class="mobile-web">
					<div class="mobile-wrap">
						<div class="wrap">
							<iframe id="iframe" src="" frameborder="0" width="100%"> </iframe>
						</div>
					</div>
					<div class="mobile-item">
						<p>移动端（点击下方查看效果）</p>
						<a href="#" id="fixed" class="lottery" data-tooltip="#html-content">移动端抽奖活动</a>
						<div id="html-content" class="item-content" style="display:none;">
		    				<p class="desc">项目描述：移动端手机页面，主要是用js动态设置rem写的，能兼容手机设备</p>
		    				<div>
		    					<img class="erweima" src="img/lottery_ewm.png">
		    					<span>（可以用手机扫码观看效果哦）</span>
		    				</div>
		    			</div>
						<a href="#" id="fixed1" class="rm" data-tooltip="#html-content1">人脉分享活动</a>
    					<div id="html-content1" class="item-content" style="display:none;">
		    				<p class="desc">项目描述：移动端手机页面，用js动态设置rem，能兼容手机设备,css3动画效果</p>
		    				<div>
		    					<img class="erweima" src="img/rm.png">
		    					<span>（可以用手机扫码观看效果哦）</span>
		    				</div>
		    			</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="pc-web">
					<div class="pc-item">
						<p>PC端</p>
						<a href="http://aleki.oschina.io/cv/" class="cv" target="_blank">我的个人在线简历</a>
						<a href="http://aleki.oschina.io/qy/" class="cv1" target="_blank">管业公司网页</a>
						
					</div>
				</div>

			</div>
			<div class="section">
				<h1>了解更多</h1>
				<p>往往自己的职业生涯是由自己的决定的</p>
				<p>我在没做前端之前做的是C++语言开发，做了一年左右，发现自己不太适合做C++，感觉很迷茫</p>
				<p>之后我选着了web前端，在网上自学前端语言，就这样慢慢踏上了前端这条不归路！</p>
				<p>闲暇时，喜欢逛有质量的网站如：
					<a href="https://www.zhihu.com/">知乎、</a>
					<a href="https://segmentfault.com/">segmentfault、</a>
					<a href="http://www.tuicool.com/">推酷、</a>
					<a href="http://gold.xitu.io/">掘金</a>
				</p>
				<div class="contact">
					<span>Email：<a href="mailto:xuqiqi2533@163.com" target="_blank">xuqiqi2533@163.com</a></span>
					<span>Tel：<a href="#">17355457790</a></span>
				</div>
				<a class="onload" href="cv.doc">下载简历</a>
			</div>
		</div>
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.pagepiling.min.js"></script>
		<script src="js/swiper.min.js"></script>
		<script src="js/jquery.darktooltip.min.js"></script>
		<script type="text/javascript">
			$('.mobile-item a.lottery').click(function() {
				$(".mobile-wrap iframe").attr("src", "http://aleki.oschina.io/mycv");
			});
            $('.mobile-item a.rm').click(function() {
    			$(".mobile-wrap iframe").attr("src", "http://aleki.oschina.io/rm");
			});
			$('#fixed').darkTooltip({
				gravity: 'north'
			});
            $('#fixed1').darkTooltip({
				gravity: 'north'
			});
			$('.myBtn').click(function(){
				$(".my-modal").removeClass('animated zoomOut').addClass('animated bounceIn').fadeIn();
			});
			$(".tip-close").click(function() {
					$(".my-modal").removeClass('animated bounceIn').addClass('animated zoomOut').fadeOut();
			});
		</script>
		<script>
			var swiper = new Swiper('.swiper-container', {
				pagination: '.swiper-pagination',
				nextButton: '.swiper-button-next',
				prevButton: '.swiper-button-prev',
				paginationClickable: true,
				spaceBetween: 30,
				centeredSlides: true,
				autoplay: 2500,
				autoplayDisableOnInteraction: false
			});
		</script>
		<script>
			$(function() {
				$('#pagepiling').pagepiling({
					sectionsColor: ['#383a3c', '#2e3846', '#2c3e50', '#3e5a77'],
					loopBottom: true,
        			loopTop: true,
					navigation: {
						textColor: '#000',
						bulletsColor: '#000',
						position: 'right',
						tooltips: ['第一屏', '第二屏', '第三屏', '第四屏']
					}
				});
			});
		</script>
		<script>
			$(function() {
				var canvas = document.querySelector('canvas'),
					ctx = canvas.getContext('2d')
				canvas.width = window.innerWidth;
				canvas.height = window.innerHeight;
				ctx.lineWidth = .3;
				ctx.strokeStyle = (new Color(150)).style;

				var mousePosition = {
					x: 30 * canvas.width / 100,
					y: 30 * canvas.height / 100
				};

				var dots = {
					nb: 750,
					distance: 50,
					d_radius: 100,
					array: []
				};

				function colorValue(min) {
					return Math.floor(Math.random() * 255 + min);
				}

				function createColorStyle(r, g, b) {
					return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';
				}

				function mixComponents(comp1, weight1, comp2, weight2) {
					return(comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);
				}

				function averageColorStyles(dot1, dot2) {
					var color1 = dot1.color,
						color2 = dot2.color;

					var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),
						g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),
						b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);
					return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));
				}

				function Color(min) {
					min = min || 0;
					this.r = colorValue(min);
					this.g = colorValue(min);
					this.b = colorValue(min);
					this.style = createColorStyle(this.r, this.g, this.b);
				}

				function Dot() {
					this.x = Math.random() * canvas.width;
					this.y = Math.random() * canvas.height;

					this.vx = -.5 + Math.random();
					this.vy = -.5 + Math.random();

					this.radius = Math.random() * 2;

					this.color = new Color();
					console.log(this);
				}

				Dot.prototype = {
					draw: function() {
						ctx.beginPath();
						ctx.fillStyle = this.color.style;
						ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
						ctx.fill();
					}
				};

				function createDots() {
					for(i = 0; i < dots.nb; i++) {
						dots.array.push(new Dot());
					}
				}

				function moveDots() {
					for(i = 0; i < dots.nb; i++) {

						var dot = dots.array[i];

						if(dot.y < 0 || dot.y > canvas.height) {
							dot.vx = dot.vx;
							dot.vy = -dot.vy;
						} else if(dot.x < 0 || dot.x > canvas.width) {
							dot.vx = -dot.vx;
							dot.vy = dot.vy;
						}
						dot.x += dot.vx;
						dot.y += dot.vy;
					}
				}

				function connectDots() {
					for(i = 0; i < dots.nb; i++) {
						for(j = 0; j < dots.nb; j++) {
							i_dot = dots.array[i];
							j_dot = dots.array[j];

							if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > -dots.distance && (i_dot.y - j_dot.y) > -dots.distance) {
								if((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > -dots.d_radius && (i_dot.y - mousePosition.y) > -dots.d_radius) {
									ctx.beginPath();
									ctx.strokeStyle = averageColorStyles(i_dot, j_dot);
									ctx.moveTo(i_dot.x, i_dot.y);
									ctx.lineTo(j_dot.x, j_dot.y);
									ctx.stroke();
									ctx.closePath();
								}
							}
						}
					}
				}

				function drawDots() {
					for(i = 0; i < dots.nb; i++) {
						var dot = dots.array[i];
						dot.draw();
					}
				}

				function animateDots() {
					ctx.clearRect(0, 0, canvas.width, canvas.height);
					moveDots();
					connectDots();
					drawDots();

					requestAnimationFrame(animateDots);
				}

				$('canvas').on('mousemove', function(e) {
					mousePosition.x = e.pageX;
					mousePosition.y = e.pageY;
				});

				$('canvas').on('mouseleave', function(e) {
					mousePosition.x = canvas.width / 2;
					mousePosition.y = canvas.height / 2;
				});

				createDots();
				requestAnimationFrame(animateDots);
			});
		</script>

	</body>

</html>